<template>
	<view>
		<view class="m-field">
			<view class="label">
				<text>{{ label }}</text>
				<text class="required" v-if="required">*</text>
				<view @click="onClick" class="field-body">
					<block v-if="type == 'textarea'">
						<textarea style="min-height: 150rpx;" :auto-height="true" @input="onInput" @focus="onFocus"
							@confirm="onConfirm" :value="value" :placeholder="placeholder"></textarea>
					</block>
					<block v-else>
						<input :disabled="type == 'select' || disabled" class="input" @input="onInput" @focus="onFocus"
							@confirm="onConfirm" :value="value" :placeholder="placeholder" />
						<view v-if="type == 'select'" class="right" @tap="onRightIcon">
							<q-icon name="q-sorting"></q-icon>
						</view>
						<view v-if="rightIcon" class="right" @tap="onRightIcon">
							<q-icon :name="rightIcon"></q-icon>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- Select选择弹窗 -->
		<q-select v-model="showPopup" :mode="mode" @confirm="onSelectConfirm" :list="list"></q-select>
	</view>
</template>

<script>
	/**
	 * m-field Field 输入框
	 * @description 此组件一般用于Input输入框，Select弹出框等。
	 * @tutorial https://ui.ymeoo.cn
	 * @property {String} label 左侧提示文字
	 * @property {Array} list 当type类型为select时选择列表数据
	 * @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用(默认false)
	 * @property {Boolean} disabled 是否禁用输入框
	 * @property {Boolean} isClick 是否自定义点击，true则不触发select弹窗
	 * @property {String} placeholder 输入框为空时占位符
	 * @property {String} type 输入框类型,可选值：text、select、textarea
	 * @property {String} right-icon 输入框右边图标
	 * @property {String} mode 当type类型为select时选择器模式
	 * @event {Function} selectConfirm 当type类型为select时选择框确认按钮返回值
	 * @event {Function} click 组件自定义点击事件
	 * @event {Function} onRightIcon 输入框右边图标点击事件
	 * @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
	 */

	export default {
		name: 'q-field',
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}
			},
			//输入类型
			type: {
				type: String,
				default: 'text'
			},
			// input的label提示语
			label: {
				type: String,
				default: ''
			},
			// 是否显示必填*号
			required: {
				type: Boolean,
				default: false
			},
			// placeholder
			placeholder: {
				type: String,
				default: '请填写内容'
			},
			value: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'selector'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			isClick: {
				type: Boolean,
				default: false
			},
			rightIcon: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				showPopup: false
			};
		},
		methods: {
			//Select时点击事件
			onClick() {
				if (this.type == 'select' && this.isClick === false) {
					if (this.showPopup) {
						this.showPopup = false;
					} else {
						this.showPopup = true;
					}
				} else {
					this.$emit('click', '');
				}
			},
			onInput(event) {
				let value = event.detail.value;
				this.$emit('input', value);
			},
			onFocus(event) {
				this.focused = true;
				this.$emit('focus', event);
			},
			onBlur(event) {
				this.$emit('blur', event);
			},
			onConfirm(e) {
				this.$emit('confirm', e.detail.value);
			},
			onSelectConfirm(event) {
				this.showPopup = false;
				this.$emit('selectConfirm', this.list[event]);

				if (this.mode == 'date') {
					this.$emit('input', event);
				} else {
					this.$emit('input', this.list[event].value);
				}
			},
			onRightIcon() {
				this.$emit('onRightIcon');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.m-field {
		padding: 30rpx 30rpx 0 30rpx;
		background-color: #ffffff;

		.label {
			.required {
				color: red;
				margin-left: 8rpx;
			}

			.field-body {
				display: flex;
				align-items: center;
				background-color: #f5f5f5;
				padding: 30rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				margin-top: 10rpx;

				.right {
					margin-left: auto;
				}

				.input {
					flex: 1;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
